<template>
  <div class="box">
    <el-form ref="roleForm" :model="role_forms" :rules="roleRules" :label-position="labelPosition" label-width="100px">
      <el-form-item prop="name" label="角色名"><el-input size="medium" v-model="role_forms.name" placeholder="请输入角色名"></el-input></el-form-item>
      <el-form-item label="备注"><el-input size="medium" v-model="role_forms.remark" placeholder="请输入备注"></el-input></el-form-item>
      <el-form-item label="用户状态">
        <el-radio-group v-model="role_forms.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item label="权限">
          <div style="margin-bottom: 20px"><el-checkbox size="medium" @change="change_all" :value="allchecked" label="全部选择" border></el-checkbox></div>
          <el-collapse class="rulebox">
            <el-collapse-item v-for="(item, i) in levela" :key="i">
              <template slot="title">
                <el-checkbox :indeterminate="item.indeterminate" v-model="item.checked" @change="change_group($event, item)" :label="item.group"></el-checkbox>
              </template>
              <ul class="rolebody">
                <template v-for="(data, ind) in item.resourceList">
                  <li :key="ind">
                    <div class="left">
                      <el-checkbox :indeterminate="data.indeterminate" v-model="data.checked" @change="change_resource($event, data, item)" :label="data.resource"></el-checkbox>
                    </div>
                    <div class="right">
                      <template v-for="(value, index) in data.actionList">
                        <el-checkbox v-model="value.checked" @change="change_name($event, value, data, item)" :label="value.id">{{ value.action }}</el-checkbox>
                      </template>
                    </div>
                  </li>
                </template>
              </ul>
            </el-collapse-item>
          </el-collapse>



      </el-form-item>
      <el-form-item>
        <el-button size="medium" @click="addSave" v-if="role_type == 'add'">确定</el-button>
        <el-button size="medium" @click="editSave" v-else>确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getrulelist, saverole, getroledetail, editrole} from '@/api/mall/role';
import {objextend} from '@/utils/index';
export default {
  name: 'Editrole',
  data() {
    return {
      list: [],
      rulelist: [],
      group_list: [],
      resource_list: [],
      // allchecked:true,
      // name_list: [],
      levelb: [],
      levela: [],
      labelPosition: 'left',
      role_forms: {
        name: '',
        status: 1,
        rule: [],
        remark: '',
        shop_rule: []
      },
      roleRules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入角色名'
          }
        ]
      }
    };
  },
  props: {
    role_type: {
      type: String,
      default: 'add'
    },
    rid: {
      type: Number,
      default: -1
    }
  },
  // watch: {
  //   rid() {
  //     if (this.rid == -1) {
  //       this.role_forms = {
  //         name: '',
  //         status: 1,
  //         rule: [],
  //         remark: '',
  //         shop_rule: []
  //       };
  //       // this.change_name();
  //     }
  //     this.getroledetail();
  //   }
  // },
  computed: {
    allchecked() {
      var a = this.levela.filter(a => {
        return a.checked;
      });
      return a.length == this.levela.length;
    }
  },
  methods: {
    //权限选择方法 start
    change_all(e) {
      this.levela.forEach(a => {
        a.indeterminate = false;
        a.checked = e;
        a.resourceList.forEach(b => {
          b.indeterminate = false;
          b.checked = e;
          b.actionList.forEach(c => {
            c.checked = e;
            // this.role_forms.rule.push(c.id);
          });
        });
      });
    },
    change_group(e, item) {
      if (e) {
        item.indeterminate = false;
        item.resourceList.forEach(a => {
          a.checked = true;
          a.indeterminate = false;
          a.actionList.forEach(b => {
            b.checked = true;
          });
        });
      } else {
        item.indeterminate = false;
        item.resourceList.forEach(a => {
          a.checked = false;
          a.indeterminate = false;
          a.actionList.forEach(b => {
            b.checked = false;
          });
        });
      }
    },
    change_resource(e, data, item) {
      if (e) {
        data.actionList.forEach(a => {
          a.checked = true;
        });
      } else {
        data.actionList.forEach(a => {
          a.checked = false;
        });
        item.checked = false;
      }
      var l = item.resourceList.filter(b => {
        return b.checked;
      });
      if (l.length == item.resourceList.length) {
        item.checked = true;
        item.indeterminate = false;
      } else if (l.length < item.resourceList.length && l.length > 0) {
        item.checked = false;
        item.indeterminate = true;
      } else {
        item.checked = false;
        item.indeterminate = false;
      }
      // if(item.resourceList.)
    },
    change_name(e, value, data, item) {
      var l = data.actionList.filter(b => {
        return b.checked;
      });
      if (l.length == data.actionList.length) {
        data.checked = true;
        data.indeterminate = false;
      } else if (l.length < data.actionList.length && l.length > 0) {
        data.checked = false;
        data.indeterminate = true;
      } else {
        data.checked = false;
        data.indeterminate = false;
      }

      var l = item.resourceList.filter(b => {
        return b.checked;
      });
      var z = item.resourceList.filter(b => {
        return b.indeterminate;
      });
      if (l.length == item.resourceList.length) {
        item.checked = true;
        item.indeterminate = false;
      } else if (l.length < item.resourceList.length && l.length > 0) {
        item.checked = false;
        item.indeterminate = true;
      } else {
        item.checked = false;

        if (z.length > 0) {
          item.indeterminate = true;
        } else {
          item.indeterminate = false;
        }
      }
    },
    //权限选择方法 end
    //获取全部权限
    getrulelist() {
      getrulelist({}).then(res => {
        let jsondata = res.msg;
        let malllist = jsondata.rule;
        // this.role_forms.shop_rule = jsondata.shop.ruleIds;
        // malllist.forEach(a=>{

        // })

        malllist.forEach(a => {
          a.indeterminate = false;
          a.checked = false;
          a.resourceList.forEach(b => {
            b.indeterminate = false;
            b.checked = false;
            b.actionList.forEach(c => {
              c.checked = false;
              // this.role_forms.rule.push(c.id);
            });
          });
        });
        this.levela = malllist;
      });
    },
    getroledetail(id) {
      let data = {
        id: id
      };
      getroledetail(data).then(res => {
        let jsondata = res.msg;
        this.role_forms = objextend(this.role_forms, jsondata);
        this.setid(jsondata.rule);
        this.role_forms.id = jsondata.id;
        this.role_forms.update_time = jsondata.update_time;
      });
    },
    setid(list) {
      this.levela.forEach(a => {
        a.resourceList.forEach(b => {
          b.actionList.forEach(c => {
            if (list.includes(c.id)) {
              c.checked = true;
            }else{
              c.checked=false
            }
          });
        });
      });
      this.levela.forEach(a=>{
        a.resourceList.forEach(b => {
          let l=b.actionList.filter(c=>{
            return c.checked
          })
          if(l.length==b.actionList.length){
            b.checked=true;
            b.indeterminate=false
          }else if(l.length<b.actionList.length&&l.length>0){
            b.checked=false;
            b.indeterminate=true
          }else{
            b.checked=false;
            b.indeterminate=false;
          }
        })
      })
      this.levela.forEach(b=>{
        let l=  b.resourceList.filter(c=>{
            return c.checked
          })
          if(l.length==b.resourceList.length){
            b.checked=true;
            b.indeterminate=false
          }else if(l.length<b.resourceList.length&&l.length>0){
            b.checked=false;
            b.indeterminate=true
          }else{
            b.checked=false;
            b.indeterminate=false;
          }

      })

    },
    getid() {
      var list = [];
      this.levela.forEach(a => {
        a.resourceList.forEach(b => {
          b.actionList.forEach(c => {
            if (c.checked) {
              list.push(c.id);
            }
          });
        });
      });
      this.role_forms.rule = list;
    },
    addSave() {
      let _this = this;
      this.getid();
      // this.role_forms.rule=
      this.$refs.roleForm.validate(valid => {
        if (valid) {
          let data = _this.role_forms;
          saverole(data).then(res => {
            _this.close();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editSave() {
      let _this = this;
      this.getid();
      this.$refs.roleForm.validate(valid => {
        if (valid) {
          let data = _this.role_forms;
          // data.rule=JSON.stringify(data)
          editrole(data).then(res => {
            _this.close();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    close() {
      this.role_forms = {
        name: '',
        status: 1,
        rule: [],
        remark: ''
      };
      this.$emit('on-close');
    }
  },
  mounted() {
    this.role_forms = {
      name: "",
      status: 1,
      rule: [],
      remark: ""
    };
    this.getrulelist();
  }
};
</script>
<style>
.rulebox .el-collapse-item__content {
  padding-bottom: 0;
}

.rulebox .el-collapse-item__wrap {
  border-bottom: none;
}

.rulebox .el-collapse-item__header {
  border-left: 1px solid #e9edef;
  border-right: 1px solid #e9edef;
}

.rulebox .el-checkbox {
  margin-left: 20px;
}
</style>
<style lang="scss" scoped>
.el-input {
  width: 270px;
}

.box {
  width: 100%;
}

.rolebody {
  display: flex;
  border-top: 1px solid #e9edef;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: flex;

    .left {
      width: 240px;
      padding: 20px 0 20px 20px;
      border-left: 1px solid #e9edef;
      border-bottom: 1px solid #e9edef;
    }

    .right {
      flex: 1;
      align-items: center;
      display: flex;
      border-left: 1px solid #e9edef;
      border-bottom: 1px solid #e9edef;
      border-right: 1px solid #e9edef;
    }
  }
}
</style>
